<style lang="scss" scoped="">
	.header{
    height: 50px;

    width: 100%;
    // background-color: white;e
    background-color: #4EA0FE;
    display: flex;
    align-items:center;
    border-bottom: 1px solid #DCDAE2;
    .menu_btn{
      width: 40px;
      height: 100%;
      justify-content: center;
      display: flex;
      align-items:center;
      position: relative;
    }
    .menu_btn:hover{
      background-color: #69f0ae;
    }
  }
  .side_bar{
    position: absolute;
    width: 200px;
    height: calc(100vh - 55px);
    z-index: 1999;
    top:55px;
    left: -200px;
    background-color: #265329;
    color:white;
    transition: left 0.3s;
    &.act{
      left: 0px;
    }

  }
  .entry{
      color:#FFFFFF;
      height: 40px;
      line-height: 40px;
      // padding: 0px 15px 15px 15px;
      padding: 0px 20px 0px 20px;
      font-size: 16px;
      text-align: center;
    }
  .entry:hover{
    cursor: pointer;
    // background-color: #69f0ae;
    color: white;

    // border-bottom: 2px solid rgb(210,210,210);
  }
  .logo{
    width: 160px;
    text-align: center;
    padding: 0px 20px 0px 20px;
    line-height: 10px;
  }
  .demo-badge{
    width: 42px;
    height: 42px;
    background: #eee;
    border-radius: 6px;
    display: inline-block;
  }
  .masge{
    padding: 8px;
    width: 40px;
    height: 40px;
    text-align: center;
    float:right;
    margin-right: 20px;

  }
  .masge:hover{
    cursor:pointer
  }
  .login-body-content{
    padding: 6px 0 0;
    height: 100%;
    padding: 4px 0;
    overflow: auto;
}
.login-content-item {
    margin: 0;
    line-height: normal;
    padding: 7px 16px;
    clear: both;
    list-style: none;
    font-size: 13px;

}
.login-body-content:hover {
    background-color: #97c0ef;
    cursor: pointer;
}
</style>
<template>
	<div class="header">

		<homeDragbtn v-show="show" :Pshow="show" @dialogVisibleEvent="showhomeDragbtn"></homeDragbtn>

		<div class="logo">
			<img src="../../static/image/logo_main2.png" @click="click()" style="width: 100%;cursor: pointer;">
		</div>

		<div style="width: 100%;user-select: none;">
			<div style="float:left" class="entry" :style="{opacity: menu==='/processmain' ? '1':'0.8'}" @click="changeMuen('/processmain')"
			 v-if="this.$hasPerm('processmain')">
				<span :style="{padding: '8px', borderBottom: menu==='/processmain' ? '1.5px solid #FFFFFF': '0px solid #FFFFFF',borderColor: menu==='/processmain' ? 'white': ''}">运营服务</span>
			</div>
			<div style="float:left" class="entry" :style="{opacity: menu==='/usermain' ? '1':'0.8'}" @click="changeMuen('/usermain')"
			 v-if="this.$hasPerm('usermain')">
				<span :style="{padding: '8px', borderBottom: menu==='/usermain' ? '1.5px solid #FFFFFF': '0px solid #FFFFFF',borderColor: menu==='/usermain' ? 'white': ''}">后台管理</span>
			</div>
			<div style="float:left" class="entry" :style="{opacity: menu==='/personalCenter' ? '1':'0.8'}" @click="changeMuen('/personalCenter')">
				<!-- v-if="this.$hasPerm('personalCenter')" -->
				<span :style="{padding: '8px', borderBottom: menu==='/personalCenter' ? '1.5px solid #FFFFFF': '0px solid #FFFFFF',borderColor: menu==='/personalCenter' ? 'white': ''}">个人中心</span>
			</div>

			<!-- <div style="float:left" class="entry" :style="{opacity: menu==='/chatter' ? '1':'0.8'}" @click="changeMuen('/chatter')"  v-if="this.$hasPerm('chatter')">
        <span :style="{padding: '8px', borderBottom: menu==='/chatter' ? '1.5px solid #FFFFFF': '0px solid #FFFFFF',borderColor: menu==='/chatter' ? 'white': ''}">智能客服助手</span>
      </div> -->


			<div style="float:right;padding: 0px 20px 0px 20px;">

				<img @click="showhomeDragbtn(show)" src="../assets/head_machine7.png" style="float:left;width:30px;height:30px;cursor:pointer;margin-top:5px;margin-right: 20px;" />

				<div style="float:right;padding-left: 8px;">
					<Dropdown @on-click="DropdownItem" transfer>
						<a href="javascript:void(0)">
							<span>
								<div style="float:left">
									<div style="font-size:14px;color:#FFFFFF;font-weight:bold;">{{this.$store.state.user.user_name}}</div>
									<div style="font-size:12px;color:#FFFFFF;max-width: 150px;text-overflow :ellipsis;white-space :nowrap; overflow : hidden; ">{{this.$store.state.user.department}}</div>
								</div>
								<Icon type="ios-arrow-down" style="border:0;vertical-align:middle;padding-left: 8px;color: white;line-height: 40px;"></Icon>
							</span>
						</a>
						<DropdownMenu slot="list">
							<DropdownItem name="changeStruct">
								<Icon type="ios-people" /> 切换组织</DropdownItem>
							<DropdownItem name="personalCenter" to="/personalCenter">
								<Icon type="md-person" /> 个人中心</DropdownItem>
							<DropdownItem name="logout" divided>
								<Icon type="md-log-out" /> 退出</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</div>


				<div style="width: 36px; height: 36px;line-height: 40px;text-align: center;float:right;">
					<img src="../../static/image/user.png" style="width: 100%;border:0;vertical-align:middle">
				</div>

				<div class="masge">
					<Poptip v-model="showPoptip" content="content" @on-popper-show="getUnread" style="text-align: left;max-width: 300px;">
						<Badge dot :count="unReadList.total">
							<img src="../../static/image/head-message.png" style="width: 100%;">
						</Badge>
						<template slot="title">
							<p style="font-size: 14px;">消息通知</p>
						</template>
						<template slot="content">
							<p v-if="unReadList.records == 0" style="text-align:center;font-size:12px; color:#c5c8ce;">暂无新的消息</p>
							<List v-else v-for="(item,index) in unReadList.records" :key="index">
								<a href="javascript:void(0)" @click="showMessageInfo(item)">
									<ListItem>
										<ListItemMeta>
											<template slot="title">
												<p style="width: 200px;text-overflow :ellipsis;white-space :nowrap; overflow : hidden;">{{item.title}}</p>
											</template>
											<template slot="description">
												<p v-if="item.type != 2" style="padding-left:10px;width: 200px;text-overflow :ellipsis;white-space :nowrap; overflow : hidden;">{{item.des}}</p>
												<p v-else style="padding-left:10px;width: 200px;text-overflow :ellipsis;white-space :nowrap; overflow : hidden;">{{transTxt(item.des)}}</p>
											</template>
										</ListItemMeta>
									</ListItem>
								</a>
							</List>
							<a href="javascript:void(0)" @click="toMessagePage">
								<p style="text-align:center;font-size:13px; color:#2d8cf0;padding-top: 8px">查看更多消息>></p>
							</a>
						</template>
					</Poptip>
				</div>

				<Modal v-model="modal" @on-ok="ok" width="360">
					<p style="color:#f60;text-align:center;font-size:20PX;">
						<span>确定退出登录？</span></p>
				</Modal>

			</div>
		</div>

		<component ref="msgModal" :is="'msgModal'" v-model="showMsg" :msgInfo="showMsgInfo"></component>

		<component v-model="modal_struct" ref="changeApartment"  :dataList="structList" :datamodal="modal_struct" :is="'changeApartment'"
		 :page="'changeStruct'"></component>
	</div>



</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import ajax from "../ajax_util"
	import * as types from '../store/types'
	import msgModal from '../comp_persomal/message_modal'
	import changeApartment from '../base/change_department'

	import homeDragbtn from './homeDragbtn'
	import marked from 'marked'

	export default {
		name: 'mheader',
		components: {
			msgModal,
			changeApartment,
			homeDragbtn,
		},
		props: {

		},
		data() {
			return {
				show: true,
				showPoptip: false,
				showMsg: false,
				showMsgInfo: {},
				unReadList: {},
				messageNumber: 5, //显示5条消息
				menu_show: false,
				user_name: "",
				modal: false,
				menu: "",
				timer: null,
				modal_struct: false,
				structList: [],
				department: ""
			}
		},
		created: function() {
			this.timer = setInterval(() => {
				this.getUnread()
			}, 600000)
		},
		mounted() {
			this.menu = localStorage.getItem('menu')
			this.getUnread()
		},
		methods: {
            transTxt(des){
                // return marked(des, { sanitize: true })

                var input = marked(des, { sanitize: true });
                var str = input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
                return str.replace("&gt;"," ");
            },
			click(){
				window.open('https://bigdata.10086.cn/wutong/#/home')
			},
			showhomeDragbtn(input) {
				console.log('showhomeDragbtn', input)
				if (this.show == input) {
					this.show = !input
				} else {
					this.show = input
				}

			},
			getUnread() {
				if (window.localStorage.getItem('token') == null) {
					console.log("清除定时器----->")
					clearInterval(this.timer)
					this.timer = null
				} else {
					var url = this.CONFIG.msg_url + "/my/unread"
					var that = this;
					var params = {
						current: "",
						pageSize: this.messageNumber
					}
					ajax.get({
						url: url,
						that: that,
						params: params,
						success: function(data) {
							that.unReadList = data
						}
					})
				}
			},
			showMessageInfo(item) {
				this.showPoptip = false
				this.showMsg = true
				this.showMsgInfo = item
			},
			//前往消息管理页面
			toMessagePage() {
				console.log("------->toMessagePage")
				localStorage.menu = "1"
				this.$router.push({
					path: "/personalCenter"
				})
			},
			DropdownItem(name) {
				if (name == 'personalCenter') {
					localStorage.menu = ""
					this.$router.push({
						path: '/personalCenter'
					})
				} else if (name == 'logout') {
					this.modal = true;
				} else if (name == "changeStruct") {
					this.modal_struct = true;
					this.getStruct();
				}
			},
			ok() {
				this.$store.commit(types.TITLE, 'logout')
				this.logout();
			},
			logout() {
				var that = this;
				var url = this.CONFIG.url_know + '/logout';
				ajax.post({
					url: url,
					that: that,
					success: function(data) {
						if (data.code === 200) {
							sessionStorage.clear();
							that.$store.commit(types.LOGOUT);
							that.$router.push({
								path: '/login'
							});
							that.$Notice.success({
								title: '已退出，请重新登录!'
							});
						} else {
							that.$Message.error('系统错误!');
						}
					}
				})
			},
			changeMuen(menu) {
				localStorage.menu = menu
				this.$router.push({
					path: menu
				})
			},
			getStruct() {
				console.log("------", this.modal_struct);
				this.department = "";
				var that = this;
				var url = this.CONFIG.url_know + '/getLoginStruct/' + this.$store.state.user.user_number;
				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						//console.log("-------data----",data);
						that.structList = data;
					}
				})
			}
		},
		destroyed() {
			console.log("清除定时器----------------->")
			clearInterval(this.timer); // 清除定时器
			this.timer = null;
		}
	}
</script>
